import {Image, StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect, useState} from "react";
import CheckBox from '@react-native-community/checkbox';
import { loadingService } from "@/utils/loadingServer";

import weChatIcon from "@/assets/images/order/weChatIcon.png"
import {useSelector} from "react-redux";
import {RootState} from "@/store";
import {parseFloat} from "@/utils";
import { createActivityTicketRequest } from "@/services/activityServices";
import {showToast} from "@/utils/rootToast";

export default function buildOrderScreen() {

    const router = useRouter();
    const [selectWechatPay, setSelectWechatPay] = useState(true);

    const activity = useSelector((state: RootState) => state.activityDetail);

    useEffect(() => {
        // goAbout();
        // goPrivacyAgreement();
    });

    const goSuccessOrder = () => {
        loadingService.show();
        const data = {
            ticketId: activity.ticketDetail.ticketId,
            reason: "",
        };
        console.log('data', data);
        createActivityTicketRequest(data)
            .then((res: any) => {
                console.log('createActivityTicketRequest', res.data);
                loadingService.hide();
                // showToast('订单支付成功');
                router.push("/order/paySuccessOrder/0")
            })
            .catch((err) => {
                console.log('err', err);
                showToast(err.msg);
                loadingService.hide();
            })

    };



    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '提交订单', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#f7f7f7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
          <View style={{ paddingHorizontal: 12, }}>
             <View style={styles.submitOrderContainer}>
                 <View style={styles.submitOrderBodyWrap}>
                     <View>
                         <Text>活动名称</Text>
                     </View>
                     <View>
                         <Text>{ activity.activityDetail.title }</Text>
                     </View>
                 </View>
                 <View style={styles.submitOrderBodyWrap}>
                     <View>
                         <Text>门票类型</Text>
                     </View>
                     <View>
                         <Text>{ activity.ticketDetail.ticketName }*1</Text>
                     </View>
                 </View>
                 <View style={[styles.submitOrderBodyWrap,{ borderWidth: 0 }]}>
                     <View>
                         <Text>费用</Text>
                     </View>
                     <View>
                         <Text style={styles.money}>¥{ parseFloat(activity.ticketDetail.price) }</Text>
                     </View>
                 </View>
             </View>
             <View style={styles.payWarp}>
                 <View style={styles.payIconWarp}>
                     <Image source={weChatIcon} style={styles.payIcon} />
                     <Text>微信</Text>
                 </View>
                 <View>
                     <CheckBox
                         value={selectWechatPay}
                         onValueChange={setSelectWechatPay}
                         style={styles.selectCheckbox}
                         tintColor="#E4E6EC"
                         lineWidth={1}
                         onCheckColor='#FB4B34'
                         onTintColor='#FB4B34'
                         onAnimationType="bounce"
                         offAnimationType="bounce"
                     />
                 </View>
             </View>
             <View style={styles.tipContainer}>
                 <View style={styles.tipTitle}>
                     <Text style={styles.tipTitleText}>报名须知</Text>
                 </View>
                 <View style={styles.tipBody}>
                     <Text style={styles.tipBodyText}>{ activity.activityDetail?.participateInNotice  }</Text>
                 </View>
             </View>
              <View style={[styles.tipContainer, { marginTop: 22, }]}>
                  <View style={styles.tipTitle}>
                      <Text style={styles.tipTitleText}>退款须知</Text>
                  </View>
                  <View style={styles.tipBody}>
                      <Text style={styles.tipBodyText}>{ activity.activityDetail?.refundNotice }</Text>
                  </View>
              </View>

          </View>
          <View style={styles.submitOrderWarp}>
             <View style={{ flexDirection: "row"}}>
                 <Text style={{ color: "#3D3D3D", lineHeight: 28, fontSize: 12, marginRight: 4, }}>费用</Text><Text style={{ color: "#FB4B34", lineHeight: 28 }}>¥</Text><Text style={styles.subMoney}>{ parseFloat(activity.ticketDetail.price) }</Text>
             </View>
            <TouchableOpacity onPress={goSuccessOrder}>
                <View style={styles.submitOrderBtn}>
                    <Text style={styles.submitOrderBtnText}>确认支付</Text>
                </View>
            </TouchableOpacity>
          </View>
        </View>

    );
}

const styles = StyleSheet.create({
    submitOrderContainer: {
        backgroundColor: "#fff",
        borderRadius: 10,
    },
    submitOrderBodyWrap: {
        flexDirection: "row",
        justifyContent: "space-between",
        paddingVertical: 12,
        marginHorizontal: 12,
        borderColor: "#F1F2F5",
        borderWidth: 0.2,
    },
    money: {
        color: "#FB4B34"
    },
    payWarp: {
        backgroundColor: "#fff",
        marginTop: 12,
        flexDirection: "row",
        justifyContent: "space-between",
        paddingVertical: 17,
        paddingHorizontal: 12,
        borderRadius: 10,
    },
    payIconWarp: {
        flexDirection: "row",
        alignItems: "center",
    },
    payIcon: {
        width: 18,
        height: 18,
        marginRight: 5,
    },
    selectCheckbox: {
        width: 15,
        height: 15,
        color: "#FB4B34"
    },
    tipContainer: {
        marginTop: 11,
    },
    tipTitle: {

    },
    tipTitleText: {
        fontSize: 12,
        color: "#3D3D3D"
    },
    tipBody: {
        marginTop: 4,
    },
    tipBodyText: {
        fontSize: 12,
        color: "#3D3D3D",
        lineHeight: 16,
    },
    submitOrderWarp: {
        position: "absolute",
        bottom: 0,
        paddingBottom: 29,
        paddingTop: 8,
        backgroundColor: "#fff",
        width: "100%",
        flexDirection: "row",
        justifyContent: "space-between",
        paddingHorizontal: 12,
    },
    subMoney: {
        fontSize: 20,
        color: "#FB4B34",
    },
    submitOrderBtn: {
        width: 110,
        height: 40,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#EC6138",
        borderRadius: 20,
    },
    submitOrderBtnText: {
        color: "#fff"
    },
    checkbox: {
        marginRight: 6,
    },
});
